<template>
    <t-row :gutter="[24, 24]">
        <t-col :flex="3">
            <div class="user-left-greeting">
                <div>
                    Hi，{{ userStore.userInfo?.nickname }}
                    <span class="regular"> {{ t('pages.user.markDay') }}</span>
                </div>
            </div>

            <t-card class="user-info-list" :title="t('pages.user.personalInfo.title')" :bordered="false">
                <t-form
                    ref="submitFormRef"
                    style="margin-top: 20px"
                    :rules="rules"
                    :data="submitForm"
                    label-align="top"
                    @submit="submit"
                >
                    <t-row style="width: 100%" :gutter="[16, 24]">
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.password')" name="password">
                                <t-input
                                    v-model="submitForm.password"
                                    type="password"
                                    :placeholder="t('pages.sysUser.passwordPlaceholder')"
                                />
                            </t-form-item>
                        </t-col>
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.sex')" name="sex">
                                <t-select
                                    v-model="submitForm.sex"
                                    :options="sexOptions"
                                    :placeholder="t('pages.sysUser.sexPlaceholder')"
                                />
                            </t-form-item>
                        </t-col>
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.nickname')" name="nickname">
                                <t-input
                                    v-model="submitForm.nickname"
                                    :placeholder="t('pages.sysUser.nicknamePlaceholder')"
                                />
                            </t-form-item>
                        </t-col>
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.phone')" name="phone">
                                <t-input
                                    v-model="submitForm.phone"
                                    :placeholder="t('pages.sysUser.phonePlaceholder')"
                                />
                            </t-form-item>
                        </t-col>
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.email')" name="email">
                                <t-input
                                    v-model="submitForm.email"
                                    :placeholder="t('pages.sysUser.emailPlaceholder')"
                                />
                            </t-form-item>
                        </t-col>

                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.avatar')" name="avatar">
                                <s-upload
                                    v-model:value="submitForm.avatar"
                                    value-type="data"
                                    :type="draggable"
                                    :limit="1"
                                    :tip="t(`pages.sysUser.avatarPlaceholder`)"
                                />
                            </t-form-item>
                        </t-col>
                        <t-col :span="6">
                            <t-form-item :label="t('pages.sysUser.remarks')" name="remarks">
                                <t-textarea
                                    v-model="submitForm.remarks"
                                    :placeholder="t('pages.sysUser.remarksPlaceholder')"
                                />
                            </t-form-item>
                        </t-col>
                    </t-row>

                    <t-button type="submit"> 提交</t-button>
                </t-form>
            </t-card>
        </t-col>
    </t-row>
</template>
<script setup lang="ts">
import type { FormInstanceFunctions, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';

import { updateApi } from '@/api/login';
import { t } from '@/locales';
import { useUserStore } from '@/store';

import { rules, sexOptions } from '../userList/props';

const userStore = useUserStore();
const submitForm = ref(userStore?.userInfo || {});
const submitFormRef = ref<FormInstanceFunctions>(null);

const submit = async (cxt: SubmitContext) => {
    if (cxt.validateResult) {
        await updateApi(submitForm.value);
        MessagePlugin.success('修改成功');
        userStore.getUserInfo();
    }
};
</script>
<style lang="less" scoped>
@import './index.less';
.t-descriptions {
    margin-top: 24px;
}
</style>
